<template>
    <div style="text-align: center; font-size: x-large;">
        <h1>Form 表单</h1>
    </div>

    <el-card style="max-width: 100%;">
        <template #header>
            <div class="card-header">
                <span>Input输入框</span>
            </div>
        </template>
        <p>
            <div>
                普通输入框：<el-input v-model="input" style="width: 240px" placeholder="请输入..." />
            </div>
            <div>&nbsp;</div>
            <div>
                禁用的输入框：<el-input v-model="input" style="width: 240px" placeholder="请输入..." disabled/>
            </div>
            <div>&nbsp;</div>
            <div>
                只读的输入框：<el-input v-model="input" style="width: 240px" placeholder="请输入..." readonly />
            </div>
            <div>&nbsp;</div>
            <div>
                一键清空的输入框：<el-input v-model="input" style="width: 240px" placeholder="请输入..." clearable/>
            </div>
            <div>&nbsp;</div>
            <div>
                格式化的输入框：
                <el-input
                    v-model="input"
                    style="width: 240px"
                    placeholder="请输入..."
                    :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                    :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
                />
            </div>
            <div>&nbsp;</div>
            <div>
                密码输入框：<el-input v-model="input" type="password" style="width: 240px" placeholder="请输入..." />
            </div>
            <div>&nbsp;</div>
            <div>
                带图标的输入框：
                <el-input v-model="input" style="width: 240px" placeholder="请输入...">
                    <template>
                        <el-icon><Edit /></el-icon>
                    </template>
                </el-input>
            </div>
            <div>&nbsp;</div>
            <div>
                文本域：
                <el-input
                    v-model="input"
                    style="width: 240px"
                    :rows="2"
                    type="textarea"
                    placeholder="请输入..."
                />
            </div>
            <div>&nbsp;</div>
            <div>
                限制输入长度：
                <el-input
                    v-model="input"
                    style="width: 240px"
                    maxlength="10"
                    placeholder="请输入..."
                    show-word-limit
                    type="text"
                />
            </div>

            
            
        </p>
    </el-card>



</template>

<script>
import { ref } from 'vue'
export default {
    setup () {
        
        const input = ref('')

        return {input}
    }
}
</script>

<style lang="scss" scoped>

</style>